<template>
  <div style="width: 60%; height: 520px; margin: auto">
    <el-card class="box-card" style="margin: 30px; ">
      <div id="aPay">
        <div style="padding-top: 30px; border-bottom: #eee solid 1px; width: 400px">
          <div>
            <p class="fsize14 fw-b pan-b10">商品订单：<i class="fsize14 c-70">{{this.orderNo}}</i></p>
            <p class="fsize14 fw-b pan-b10">
              支付金额：
              <i class="fsize16" style="color: #0ac277">￥</i>
              <span class="fsize24" style="color: #0ac277">{{this.orderInfo.totalFee}}</span>
              <el-button type="text" @click="updateDetails" :icon="isDetails === false ? 'el-icon-arrow-down' : 'el-icon-arrow-up'">订单详情</el-button>
            </p>
          </div>
          <div v-if="isDetails">
            <p class="fsize14 pan-b10 c-70">商品名称：{{this.orderInfo.courseTitle}}</p>
            <p class="fsize14 pan-b10 c-70">应付金额：￥{{this.orderInfo.totalFee}}</p>
            <p class="fsize14 pan-b10 c-70">订单日期：{{this.orderInfo.gmtCreate}}</p>
          </div>
        </div>
        <div>
          <div class="pan-t30">
            <p class="fsize14 fw-b pan-b10">支付方式：</p>
            <el-button :icon="this.statusPay === 0 ? 'el-icon-check' : ''" :class="{selectPay:statusPay === 0}" @click="aliPay">支付宝支付</el-button>
            <el-button :icon="this.statusPay === 1 ? 'el-icon-check' : ''" :class="{selectPay:statusPay === 1}" @click="weiXinPay">微信支付</el-button>
          </div>
          <div>
            <el-image
              v-if="this.statusPay === 1"
              style="width: 150px; height: 150px"
              src="https://cdn.jsdelivr.net/gh/CodeZixuan/Blog_Images/%E6%94%AF%E4%BB%98/wechat.png"></el-image>
            <el-button style="float: right; margin-bottom: 30px" type="success" @click="pay">立即支付</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import aliPay from "@/api/alipay";

export default {
  data() {
    return {
      isDetails: false,
      course: {},
      statusPay: 0,
      orderInfo: {},
      result: '',
      orderNo: '',
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.orderNo = this.$route.params.id
    }
    this.getOrderInfoByOrderNum()
  },
  methods: {
    getOrderInfoByOrderNum () {
      aliPay.getOrderInfoByOrderNum(this.orderNo)
        .then(res => {
          this.orderInfo = res.data.data.orderInfo
        })
    },
    updateDetails() {
      if (this.isDetails) {
        this.isDetails = false
      } else {
        this.isDetails = true
      }
    },
    aliPay() {
      this.statusPay = 0;
    },
    weiXinPay() {
      this.statusPay = 1;
    },
    pay() {
      aliPay.getAliPay(this.orderInfo)
        .then(res => {
          this.result = res.data.data.result
          document.querySelector("body").innerHTML = this.result
          document.forms[0].submit();
        })
    }
  }
}
</script>

<style scoped>
#aPay {
  /*margin-left: 720px;*/
  /*text-align: center;*/
}

.selectPay {
  border: #409eff solid 2px;
}

.fsize16 {
  font-size: 16px;
}

.fsize14 {
  font-size: 14px;
}

.fsize24 {
  font-size: 24px;
}

.fw-b {
  font-weight: bold;
}

.pan-b10 {
  padding-bottom: 10px;
}

.pan-t30 {
  padding-top: 30px;
}

.c-70 {
  color: #707070;
}

</style>
